<template>
  <el-container>

    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="120px" label-position="left"
             class="demo-ruleForm" size="small">
      <el-form-item label="模板名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>

      <el-form-item label="佣金计算方式">
        <el-radio v-model="ruleForm.type" label="0" border>普通</el-radio>
        <el-radio v-model="ruleForm.type" label="1" border>自定义</el-radio>
      </el-form-item>

      <div v-if="ruleForm.type == '0'">
        <el-form-item label="通用价格">
          <el-input v-model="ruleForm.fixed_price">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
      </div>

      <div v-if="ruleForm.type == '1'">
        <el-form-item label="星期一">
          <el-input v-model="ruleForm.mon">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="星期二">
          <el-input v-model="ruleForm.tue">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="星期三">
          <el-input v-model="ruleForm.wed">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="星期四">
          <el-input v-model="ruleForm.thu">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="星期五">
          <el-input v-model="ruleForm.fri">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="星期六">
          <el-input v-model="ruleForm.sat">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="星期天">
          <el-input v-model="ruleForm.sun">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
      </div>

      <el-form-item label="配送时间段" >
        <el-col span="20">
          <el-input v-model="ruleForm.during">
            <template slot="prepend">间隔</template>
            <template slot="append">分钟</template>
          </el-input>
        </el-col>
        <el-col span="4">
          <el-button type="primary" @click="createTimed">生成配送时间段</el-button>
        </el-col>
      </el-form-item>

      <el-form-item label="时间运费模板" v-if="ruleForm.content.length > 0">
        <el-col span="12" class="row-col" v-for="timedItem in ruleForm.content">
          <el-col span="12">
            <el-input v-model="timedItem.timed" readonly="true">
              <template slot="append">附加费</template>
            </el-input>
          </el-col>
          <el-col span="7">
            <el-input v-model="timedItem.price">
              <template slot="append">元</template>
            </el-input>
          </el-col>
          <el-col span="4">
            <el-button type="success" v-if="timedItem.enable" @click="changeEnable({currentIten:timedItem})">使用中
            </el-button>
            <el-button type="info" v-if="!timedItem.enable" @click="changeEnable({currentIten:timedItem})">已废弃
            </el-button>
          </el-col>
        </el-col>

      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即保存</el-button>
        <!--<el-button @click="resetForm('ruleForm')">重置</el-button>-->
        <el-button @click="goBack()">返回</el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>

<script>
  export default {
    mounted() {
      let _this = this;
      let attrs = this.$attrs;
      if (attrs.methodType == this.constant.EDITORMETHOD) {
        this.api.getTimeRule({
          id: attrs.id
        }).then(function (res) {
          if (res.code == 1) {
            _this.ruleForm = res.data;
            _this.ruleForm.type = _this.ruleForm.type.toString();
            _this.ruleForm.content = JSON.parse(_this.ruleForm.content);
          }
        }).catch(function (error) {
          throw new Error(error);
        });
      }
    },
    methods: {
      goBack: function () {
        this.$router.go(-1)
      },
      submitForm(formName) {
        let _this = this;
        let attrs = this.$attrs;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (attrs.methodType == this.constant.ADDMETHOD) {
              _this.ruleForm.content = JSON.stringify(_this.ruleForm.content);
              _this.api.insertTimeRule(_this.ruleForm).then(function (res) {
                if (res.code == 1) {
                  _this.goBack();
                  _this.$message({
                    showClose: true,
                    message: res.msg,
                    type: 'success',
                  });
                } else {
                  _this.$message({
                    showClose: true,
                    message: res.msg,
                    type: 'warning'
                  });
                }
              }).catch(function (error) {
                throw new Error(error);
              });
            } else if (attrs.methodType == this.constant.EDITORMETHOD) {
              _this.ruleForm.content = JSON.stringify(_this.ruleForm.content);
              _this.api.updateTimeRule(_this.ruleForm).then(function (res) {
                if (res.code == 1) {
                  _this.goBack();
                  _this.$message({
                    showClose: true,
                    message: res.msg,
                    type: 'success',
                  });
                } else {
                  _this.$message({
                    showClose: true,
                    message: res.msg,
                    type: 'warning'
                  });
                }
              }).catch(function (error) {
                throw new Error(error);
              });
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      createTimed: function () {  // 生成定时时间
        let currentDataTime = 86400;
        let spacingInterval = this.ruleForm.during * 60;
        let maxSize = Math.ceil(currentDataTime / spacingInterval);
        let current = 0, next = 0, currentTemp = {}, nextTemp = {}, currentTimed, timedGroup = [];
        for (let i = 0; i < maxSize; i++) {
          current = i * spacingInterval;
          next = (i + 1) * spacingInterval;

          // currentTemp
          currentTemp.hour = Math.floor(current / 3600);
          if (current % 3600 == 0) {
            currentTemp.minute = 0;
          } else {
            currentTemp.minute = current % 3600 / 60;
          }
          if (currentTemp.hour >= 24) {
            currentTemp.hour = 0;
          }

          // nextTemp
          nextTemp.hour = Math.floor(next / 3600);
          if (next % 3600 == 0) {
            nextTemp.minute = 0;
          } else {
            nextTemp.minute = next % 3600 / 60;
          }
          if (nextTemp.hour >= 24) {
            nextTemp.hour = 0;
            nextTemp.minute = 0;
          }

          currentTimed = (currentTemp.hour < 10 ? '0' + currentTemp.hour : currentTemp.hour) + ':' + (currentTemp.minute < 10 ? '0' + currentTemp.minute : currentTemp.minute)
            + '~' +
            (nextTemp.hour < 10 ? '0' + nextTemp.hour : nextTemp.hour) + ':' + (nextTemp.minute < 10 ? '0' + nextTemp.minute : nextTemp.minute);
          timedGroup.push({
            timed: currentTimed,
            price: 0,
            enable: true
          })
        }
        this.ruleForm.content = timedGroup;
      },
      changeEnable({currentIten: timedItem}) {
        timedItem.enable = !timedItem.enable;
      }
    },
    data() {
      return {
        ruleForm: {
          id: null,                //类型：Number  必有字段  备注：无
          name: '',                //类型：String  必有字段  备注：模板名
          during: '',                //类型：String  必有字段  备注：时间段、分钟
          content: '',                //类型：String  必有字段  备注：内容
          sun: '',                //类型：String  必有字段  备注：星期天基本费用元/小时
          mon: '',                //类型：String  必有字段  备注：星期一
          tue: '',                //类型：String  必有字段  备注：星期二
          wed: '',                //类型：String  必有字段  备注：星期三
          thu: '',                //类型：String  必有字段  备注：星期四
          fri: '',                //类型：String  必有字段  备注：星期五
          sat: '',                //类型：String  必有字段  备注：星期六
          type: '0',                //类型：String  必有字段  备注：0，普通；1，自定义
          fixed_price: ''                //类型：String  必有字段  备注：普通价格
        },
        rules: {
          name: [
            {required: true, message: '请输入模板名称', trigger: 'blur'},
          ],
        },
      }
    },
  }
</script>

<style scoped>
  .el-container {
    display: block;
  }

  .el-form {
    width: 1000px;
    margin: 15px 0 15px 30px;
  }

  .row-col {
    margin-bottom: 15px;
  }
</style>
